<template>
  <div>
    <header-tilte :title="title"></header-tilte>
   <!-- 一键订水（分为单商品和多商品）-->
    <mu-tabs :value.sync="active2" color="white" indicator-color="#2196f3" full-width>
      <mu-tab>单商品下单</mu-tab>
      <mu-tab>多商品下单</mu-tab>
    </mu-tabs>
    <div class="flex_center">
      <div class="bodyContent" style="overflow: hidden;overflow-y: auto">
        <div class="demo-text" v-if="active2 === 0">
          <water-tict-choose></water-tict-choose>
        </div>
        <div class="demo-text" v-if="active2 === 1">
          <water-tickt-choose-more></water-tickt-choose-more>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import carouselImg1 from '../../assets/img/01.jpg';
    import carouselImg2 from '../../assets/img/02.jpg';
    import carouselImg3 from '../../assets/img/03.jpg';
    import DefaultAddress from "../../components/components/DefaultAddress";
    import NoWaterBill from "../../components/water_bill/components/NoWaterBill";
    import WaterTictChoose from "./components/WaterTictChoose";
    import WaterTicktChooseMore from "../../components/water_bill/components/WaterTicktChooseMore";
    // import carouselImg4 from '../../assets/img/04.jpg';

    export default {
      data(){
        return{
          title:'一键订水',
          active2:0,
          index:0,
          waterChoose:{
            goods_name:'',
            rest_num:0,
          },
        }
      },
      mounted(){
        this.checkLogin();
        this.$nextTick(() => {

        });
      },
      methods:{

      },
      watch:{
      },
      components: {
        WaterTicktChooseMore,
        WaterTictChoose,
        NoWaterBill,
        DefaultAddress,
        HeaderTilte},
      name: "booking-water"
    }
</script>

<style scoped>
  @import "css/bookingWater.css";
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
</style>
